<template>
	<view class="content">
		<view class="topButton">
			<!-- <icon class="iconfont iconlajixiang lefticon" type="" v-show="option.title==2" @tap="reset()" /> -->
			<icon class="iconfont iconlajixiang lefticon" type="" v-show="option.title==2" @tap="delproduce()" />
			<view class="button" v-if="option.title==1" @tap="send()">发送</view>
			<view class="button" v-else @tap="finish()">完成</view>
		</view>
		<view class="send" v-if="option.title==1">
			<view class="cost">
				<formItem disabled :lable="'服务'" :value="'时运高'" :type="'text'" :disable="true">
				</formItem>
			</view>
			<view class="form">
				<formItem ref="liaison" :lable="'联系人'" :placeholder="'您的尊姓'" :type="'text'" :value="formData.liaison"
					:objkey="'liaison'" @child="onchange">
				</formItem>
				<formItem ref="liaisonPhone" :lable="'电话号码'" :placeholder="'11位手机号'" :maxlength="11" :type="'number'"
					:value="formData.liaisonPhone" :objkey="'liaisonPhone'" @child="onchange">
				</formItem>
				<view class="formItem f16 " @tap="getOpenlocation()">
					<view class="text">服务位置</view>
					<view class="f16">
						<input :value="formData.svcPosition" type="number" placeholder=" " disabled="disabled" style="color: #555555;" class="tffinput"/>
					</view>
					<icon class="iconfont iconweizhi1 hasmap" type="" />
				</view>
				<!-- <formItem ref="fullAddr" :lable="'详细地址'" :placeholder="'街道门牌号信息'" :type="'number'"
					:value="formData.fullAddr" :objkey="'fullAddr'" @child="onchange">
				</formItem> -->
				<view class="textare f16">
					<view class="fakeInput">
						<view class="text">详细地址</view>
						<view class="fake">街道门牌号信息</view>
					</view>
					<view class="textart">
						<textarea v-model="formData.fullAddr" placeholder=" " class="biginput" />
					</view>
				</view>
			</view>
		</view>
		<view class="already" v-else>
			<view class="cost">
				<formItem :lable="'费用'" :placeholder="'填写金额'" :type="'number'" :value="formData.svcCost" 
					:objkey="'svcCost'" @child="onchange">
				</formItem>
			</view>
			<view class="form">
				<formItem :lable="'联系人'" :placeholder="'填写联系人'" :type="'text'" :value="formData.liaison" :disable="true"
					:objkey="'liaison'" @change="onchange">
				</formItem>
				<formItem :lable="'电话号码'" :placeholder="'填写电话号码'" :type="'number'" :maxlength="11" :disable="true"
					:value="formData.liaisonPhone" :objkey="'liaisonPhone'" @child="onchange">
				</formItem>
				<view class="formItem f16">
					<view class="text">服务位置</view>
					<view class="f16 tinput" style="color: #555555;">
						{{formData.svcPosition || ''}}
					</view>
					<icon class="iconfont iconweizhi1 hasmap" type="" />
				</view>
				<!-- <formItem :lable="'详细地址'" :placeholder="'填写详细地址'" :type="'number'" :value="formData.fullAddr" :disable="true"
					:objkey="'fullAddr'" @child="onchange">
				</formItem> -->
				<view class="textare f16">
					<view class="fakeInput">
						<view class="text">详细地址</view>
						<!-- <view class="fake">填写更换或维修的内容</view> -->
					</view>
					<view class="textart">
						<textarea :value="formData.fullAddr" placeholder=" "  disabled="disabled" class="biginput" />
					</view>
				</view>
			</view>
		</view>
		<view class="tips" v-show="option.title!=1">
			<text class="s">注：</text>
			<text style="color: #555555;">服务完成后，输入费用，再点击右上角的“完成”</text>
		</view>

	</view>
</template>


<script>
	import formItem from '@/components/formItem/formItem';
	export default {
		components: {
			formItem
		},
		data() {
			return {
				isfocus: true,
				option: '',
				formData: {
					liaison: "",
					liaisonPhone: "",
					svcPosition: "", //服务位置
					fullAddr: "", //详细地址  
					svcId: "", //服务id
				},
				ruler: [{}],
				passAddress: "",
				longitude: "",
				latitude: "",
				addsdisplay: "",
				svcRecordId:""
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.title == 1) {
				uni.setNavigationBarTitle({
					title: '发送位置'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '已发送'
				})
				this.svcRecordId=option.svcRecordId
				this.getDetialInfo()
			}
			this.option = option
		},
		methods: {
			finish() {
				if(this.formData.svcCost){
					uni.showModal({
						title: '确定服务完成？',
						duration: 2000,
						confirmText: '完成',
						confirmColor: '#03CBCB',
						success: (res)=> {
							if (res.confirm) {
								console.log('用户点击确定',this.formData);
								let svcRecordId = this.formData.svcRecordId;
								let svcCost = this.formData.svcCost;
								this.postApi('finishServe','POST',{
									data:{svcRecordId,svcCost},
									loading:true
								}).then(res=>{
									uni.redirectTo({
									    url:'../serverList/serverPage'
									});
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '请先填写金额',
						duration: 2000,
						confirmText: '确定',
						showCancel: false,
						confirmColor: '#ff0000',
						success: function(res) {
						}
					});
				}
				
			},
			validate() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.formData.liaison.trim() == "") {
					uni.showToast({
						title: '请填写联系人',
						icon:"none",
						position:"bottom"
					})
					return false
				} else if (this.formData.liaisonPhone.trim() == "") {
					uni.showToast({
						title: '请填写手机号',
						icon:"none",
						position:"bottom"
					})
					return false
				} else if (!reg_tel.test(this.formData.liaisonPhone)) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon:"none",
						position:"bottom"
					})
					return false
				} else if (this.formData.svcPosition == "") {
					uni.showToast({
						title: '请选择服务位置',
						icon:"none",
						position:"bottom"
					})
					return false
				} else if (this.formData.fullAddr == "") {
					uni.showToast({
						title: '请填写详细地址',
						icon:"none",
						position:"bottom"
					})
					return false
				}
				return true
			},
			send() {
				this.formData.svcId = this.option.svcId;
				// uni.navigateBack({
				//     delta: 1
				// });
				if (this.validate()) {
					this.postApi('sendPlace', 'POST', {
						data: this.formData,
						loading:true
					}).then(res => {
						uni.showModal({
							title: '位置发送成功',
							duration: 2000,
							confirmText: '确定',
							showCancel: false,
							confirmColor: '#ff0000',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateBack({
										delta:1
									})
								}
							}
						});
					})
				}
			},
			onchange(obj) {
				this.formData[obj.key] = obj.valule.value
			},
			getOpenlocation() {
				let that = this
				wx.chooseLocation({
					success: res => {
						that.getValueMap(res)
					},
					fail: res => {
						console.log('打开地图选择位置取消', res)
					}
				})
			},
			getValueMap(res) {
				this.passAddress = res.address + res.name,
					this.longitude = res.longitude,
					this.latitude = res.latitude,
					this.addsdisplay = false
				console.log('res', res)
				this.formData.svcPosition = res.name
			},
			reset() {
				console.log('重置')
				for (let item in this.formData) {
					this.$refs[item] ? this.$refs[item].reset() : "";
					this.formData[item] = ""
				}
			},
			getDetialInfo(){//已发送获取详情
				this.postApi('detail','GET',{
					data:{svcRecordId:this.svcRecordId},
					loading:true
				}).then(res=>{
					this.formData = res.data
					console.log('已发送详情',this.formData)
				})
			},
			delproduce(){
				let positionId = this.formData.positionId;
				uni.showModal({
					title: '清除已发送位置',
					duration: 2000,
					confirmText: '确定',
					confirmColor: '#03CBCB',
					success:(res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							this.postApi('delete','POST',{
								data:{positionId}
							}).then(res=>{
								console.log(res)
								uni.showToast({
									title:'清除成功'
								})
								uni.navigateBack({
									delta:1
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;

		.topButton {
			height: 104rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-bottom: 17rpx;

			.lefticon {
				margin-left: 40rpx;
				color: @primary-color;
				font-size: 18px;
				position: absolute;
				left: 0rpx;
			}

			.button {
				width: 112rpx;
				height: 60rpx;
				background-color: @primary-color;
				text-align: center;
				line-height: 60rpx;
				margin-right: 33rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
			}
		}

		.already,
		.send {
			.cost {
				background-color: #FFFFFF;
				margin-bottom: 16rpx;
			}

			.form {
				background-color: #FFFFFF;
			}

			.formItem {
				border-bottom: 1rpx solid #e1e1e1;
				display: flex;
				flex-direction: row;
				padding-left: 39rpx;
				height: 101rpx;
				align-items: center;
				position: relative;

				.lefticon {
					margin-right: 28rpx;
					color: @primary-color;
				}

				.text {
					color: #555555;
					margin-right: 60rpx;
					width: 144rpx;
				}

				.hasmap {
					position: absolute;
					right: 35rpx;
					color: @primary-color;
				}
				.tinput{
					width: calc( 95% - 204rpx );
					overflow:hidden;
					white-space:nowrap;
					text-overflow:ellipsis;
					margin-right: 33rpx;
				}
				.tffinput{
					overflow:hidden;
					white-space:nowrap;
					text-overflow:ellipsis;
					margin-right: 33rpx;
				}
			}

			.focus {
				border-bottom: 1rpx solid @primary-color;
			}
		}



		.tips {
			width: 80%;
			margin: 13% auto 0 auto;
			text-align: center;

			.s {
				color: @primary-color;
			}
		}
		.textare{
			border-bottom: 1rpx solid #e1e1e1;
			display: flex;
			flex-direction: column;
			padding-left: 39rpx;
			position: relative;
			background-color: #FFFFFF;
			padding-top: 10rpx;
			padding-bottom:40rpx;
			.fakeInput{
				display: flex;
				flex-direction: row;
				.text{
					margin-right: 20rpx;
					width: auto;
				}
				
			}
			.text{
				color: #555555;
				margin-right: 60rpx;
				width: 144rpx;
			}
			.biginput{
				margin-top:15rpx;
				width: 90%;
				border: 1rpx solid #e1e1e1;
				padding:10rpx;
				min-height: 200rpx;
				color: #555555;
				vertical-align: middle;
			}
		}
		.fake{
			color: #d7d7d7 !important;
		}
	}
</style>
